<template>
    <div class="aside-div">
        <div class="aside-div" v-if="vipAdvShow">
            <div class="adv-content">
                <el-carousel trigger="click" :height="carouselHeight" indicator-position="none">
                    <el-carousel-item v-for="item in vipAdvs" :key="item.id">
                        <a target="_blank" :href="item.blanklinkurl">
                            <img class="adv-img" :src="item.imageurl || item.imagelink" :height="carouselHeight"
                                :alt="item.title" />
                        </a>
                        <span class="adv-title">{{item.title}}</span>
                        <span class="adv-desc">{{item.description}}</span>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <!-- 公益广告-->
        <div class="aside-div" v-if="welfareAdvShow">
            <div class="adv-content">
                <el-carousel trigger="click" :height="carouselHeight" indicator-position="none">
                    <el-carousel-item v-for="item in welfareAdvs" :key="item.id">
                        <a target="_blank" :href="item.blanklinkurl">
                            <img class="adv-img" :src="item.imageurl || item.imagelink" :height="carouselHeight"
                                :alt="item.title" />
                        </a>
                        <span class="adv-title">{{item.title}}</span>
                        <span class="adv-desc">{{item.description}}</span>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <!-- 收费广告-->
        <div class="aside-div" v-if="generalAdvShow">
            <div class="adv-content">
                <el-carousel trigger="click" :height="carouselHeight" indicator-position="none">
                    <el-carousel-item v-for="item in generalAdvs" :key="item.id">
                        <a target="_blank" :href="item.blanklinkurl">
                            <img class="adv-img" :src="item.imageurl || item.imagelink" :height="carouselHeight"
                                :alt="item.title" />
                        </a>
                        <span class="adv-title">{{item.title}}</span>
                        <span class="adv-desc">{{item.description}}</span>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        isNull
    } from '../util/util'
    export default{
        data() {
            return {
                vipAdvs: [],
                vipAdvShow: false,
                generalAdvs: [],
                generalAdvShow: false,
                welfareAdvs: [],
                welfareAdvShow: false,
                carouselHeight: '150px',
            }
        },
        created() {
            this.getWebAdvs('vip'),
            this.getWebAdvs('general'),
            this.getWebAdvs('welfare')
        },
        methods: {
            getWebAdvs(type) {
                const _this = this
                const params = {
                    type: type
                }
                _this.axios.post(_this.$API.ZHIHUAPI.getWebAdvs, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            if (type === 'vip') {
                                _this.vipAdvs = res.data;
                                _this.vipAdvShow = (res.data.length > 0 ? true : false);
                            } else if (type === 'general') {
                                _this.generalAdvs = res.data;
                                _this.generalAdvShow = (res.data.length > 0 ? true : false);
                            } else if (type === 'welfare') {
                                _this.welfareAdvs = res.data;
                                _this.welfareAdvShow = (res.data.length > 0 ? true : false);
                            }
                        } else {
                            if (type === 'vip') {
                                _this.vipAdvs = [];
                                _this.vipAdvShow = false;
                            } else if (type === 'general') {
                                _this.generalAdvs = [];
                                _this.generalAdvShow = false;
                            } else if (type === 'welfare') {
                                _this.welfareAdvs = [];
                                _this.welfareAdvShow = false;
                            }
                        }
                    }
                }).catch(() => {})
            },
        }
    }
</script>

<style scoped>
    .adv-content .adv-title {
        position: absolute;
        top: 0;
        left: 40%;
        font-weight: bold;
        color: #f2f6fc;
        font-size: 16px;
    }

    .adv-content .adv-desc {
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 12px;
        color: #f2f6fc;
        margin: 5px;
    }

    .adv-content .adv-img {
        width: 100%;
        cursor: pointer;
    }
</style>
